<template>
	<div class="app-container">
		<el-form
			v-show="showSearch"
			ref="queryRef"
			:inline="true"
			:model="queryParams"
		>
			<el-form-item label="部门名称" prop="deptName">
				<el-input
					v-model="queryParams.deptName"
					clearable
					placeholder="请输入部门名称"
					style="width: 240px"
					@clear="handleQuery()"
					@keyup.enter="handleQuery()"
				/>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select
					v-model="queryParams.status"
					clearable
					placeholder="部门状态"
					style="width: 240px"
					@change="handleQuery()"
				>
					<el-option
						v-for="dict in sys_normal_disable"
						:key="dict.value"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<!-- prettier-ignore -->
				<el-button icon="Refresh" @click="resetQuery()">重置</el-button>
				<!-- prettier-ignore -->
				<el-button icon="Search" type="primary" @click="handleQuery()">搜索</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					v-hasPermi="['system:dept:add']"
					icon="Plus"
					plain
					size="small"
					type="primary"
					@click="handleAdd"
				>新增
				</el-button
				>
			</el-col>
			<!--			<el-col :span="1.5">-->
			<!--				<el-button-->
			<!--					type="primary"-->
			<!--					plain-->
			<!--					size="small"-->
			<!--					:icon="switchIcon"-->
			<!--					@click="handleSwitch()"-->
			<!--					:title="'切换到' + tableSwitch"-->
			<!--					>{{ tableSwitch }}</el-button-->
			<!--				>-->
			<!--			</el-col>-->
			<el-col v-if="total === 0" :span="1.5">
				<el-button
					icon="Sort"
					plain
					size="small"
					type="info"
					@click="toggleExpandAll()"
				>展开/折叠
				</el-button
				>
			</el-col>
			<el-col v-if="!single && ids.length === 1" :span="1.5">
				<el-button
					v-if="!single"
					v-hasPermi="['system:dict:edit']"
					:disabled="single"
					icon="edit"
					plain
					size="small"
					type="success"
					@click="handleUpdate"
				>修改
				</el-button
				>
			</el-col>
			<el-col v-if="!multiple && ids.length >= 1" :span="1.5">
				<el-button
					v-if="!multiple"
					v-hasPermi="['system:dict:remove']"
					:disabled="multiple"
					icon="delete"
					plain
					size="small"
					type="danger"
					@click="batchDelete"
				>删除
				</el-button
				>
			</el-col>
			<!-- prettier-ignore -->
			<right-toolbar v-model:showSearch="showSearch" @queryTable="handleQuery()" />
		</el-row>

		<el-table
			v-if="refreshTable"
			v-loading="loading"
			:data="deptList"
			:default-expand-all="isExpandAll"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			border
			row-key="deptId"
			stripe
		>
			<el-table-column label="部门名称" prop="deptName" />
			<!-- prettier-ignore -->
			<el-table-column label="排序" prop="orderNum" />
			<el-table-column label="状态" prop="status">
				<template #default="scope">
					<dict-tag
						:options="sys_normal_disable"
						:value="scope.row.status"
					/>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="创建日期"
				prop="createTime"
				width="300"
			>
				<template #default="scope">
					<span>{{ dateTimeSub(scope.row.createTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				class-name="small-padding fixed-width"
				label="操作"
				width="300"
			>
				<template #default="scope">
					<el-link
						v-hasPermi="['system:dept:edit']"
						:underline="false"
						class="table_link_btn"
						icon="edit"
						type="primary"
						@click="handleUpdate(scope.row)"
					><span class="table_link_text">修改</span></el-link
					>
					<el-link
						v-hasPermi="['system:dept:add']"
						:underline="false"
						class="table_link_btn"
						icon="plus"
						type="primary"
						@click="handleAdd(scope.row)"
					><span class="table_link_text">新增</span></el-link
					>
					<el-link
						v-if="scope.row.parentId != 0"
						v-hasPermi="['system:dept:remove']"
						:underline="false"
						class="table_link_btn"
						icon="delete"
						type="danger"
						@click="handleDelete(scope.row)"
					><span class="table_link_text">删除</span></el-link
					>
				</template>
			</el-table-column>
		</el-table>

		<el-table
			v-if="pageTable"
			ref="pageTableRef"
			v-loading="pageLoading"
			:data="pageTableList"
			border
			stripe
			@selection-change="multipleSelection"
		>
			<el-table-column align="center" type="selection" width="55" />
			<el-table-column label="部门名称" prop="deptName" />
			<!-- prettier-ignore -->
			<el-table-column align="center" label="编号" prop="deptId" width="200" />
			<el-table-column label="排序" prop="orderNum" />
			<el-table-column
				:formatter="statusFormat"
				align="center"
				label="状态"
				prop="status"
				width="200"
			>
				<template #default="scope">
					<dict-tag
						:options="sys_normal_disable"
						:value="scope.row.status"
					/>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="创建时间"
				prop="createTime"
				width="300"
			>
				<template #default="scope">
					<span>{{ scope.row.createTime }}</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="修改时间"
				prop="updateTime"
				width="300"
			>
				<template #default="scope">
					<span>{{ scope.row.updateTime }}</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				class-name="small-padding fixed-width"
				label="操作"
				width="200"
			>
				<template #default="scope">
					<el-link
						v-hasPermi="['system:dept:edit']"
						:underline="false"
						class="table_link_btn"
						icon="edit"
						type="primary"
						@click="handleUpdate(scope.row)"
					><span class="table_link_text">修改</span></el-link
					>
					<el-link
						v-hasPermi="['system:dept:add']"
						:underline="false"
						class="table_link_btn"
						icon="plus"
						type="primary"
						@click="handleAdd(scope.row)"
					><span class="table_link_text">新增</span></el-link
					>
					<el-link
						v-if="scope.row.parentId != 0"
						v-hasPermi="['system:dept:remove']"
						:underline="false"
						class="table_link_btn"
						icon="delete"
						type="danger"
						@click="handleDelete(scope.row)"
					><span class="table_link_text">删除</span></el-link
					>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="pageTable && total > 0"
			v-model:limit="queryParams.pageSize"
			v-model:page="queryParams.pageNum"
			:total="total"
			@pagination="getPage()"
		/>

		<!-- 添加或修改部门对话框 -->
		<el-dialog v-model="open" :title="title" append-to-body width="30%" @closed="cleanSelect()">
			<el-form
				ref="deptRef"
				:model="form"
				:rules="rules"
				label-width="100px"
			>
				<el-row>
					<el-col v-if="form.parentId !== 0" :span="24">
						<el-form-item label="上级部门" prop="parentId">
							<!-- prettier-ignore -->
							<el-tree-select
								v-model="form.parentId"
								:data="deptOptions"
								:props="{ value: 'deptId', label: 'deptName', children: 'children' }"
								:render-after-expand="false"
								check-strictly
								filterable
								placeholder="选择上级部门"
								style="width: 100%;"
								value-key="deptId"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="部门名称" prop="deptName">
							<el-input
								v-model="form.deptName"
								placeholder="请输入部门名称"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="显示排序" prop="orderNum">
							<el-input-number
								v-model="form.orderNum"
								:min="0"
								controls-position="right"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="负责人" prop="leader">
							<el-input
								v-model="form.leader"
								maxlength="20"
								placeholder="请输入负责人"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话" prop="phone">
							<el-input
								v-model="form.phone"
								maxlength="11"
								placeholder="请输入联系电话"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="邮箱" prop="email">
							<el-input
								v-model="form.email"
								maxlength="50"
								placeholder="请输入邮箱"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="部门状态">
							<el-radio-group v-model="form.status">
								<el-radio
									v-for="dict in sys_normal_disable"
									:key="dict.value"
									:label="dict.value"
								>{{ dict.label }}
								</el-radio
								>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<!-- prettier-ignore -->
					<el-button type="primary" @click="submitForm()">确 定</el-button>
					<el-button @click="cancel()">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="Dept" setup>
import Dept from "@/api/request/system/dept";
// prettier-ignore
const {
	loading,
	open,
	showSearch,
	title,
	deptOptions,
	deptList,
	isExpandAll,
	refreshTable,
	queryParams,
	form,
	rules,
	sys_normal_disable,
	queryRef,
	statusOptions,
	deptRef,
	single,
	multiple,
	pageTable,
	pageLoading,
	total,
	pageTableList,
	switchIcon,
	tableSwitch,
	statusFormat,
	getPage,
	handleSwitch,
	cancel,
	multipleSelection,
	batchDelete,
	handleQuery,
	resetQuery,
	handleAdd,
	toggleExpandAll,
	handleUpdate,
	submitForm,
	handleDelete,
	ids,
	pageTableRef,
	cleanSelect,
} = Dept();
</script>
